<template>
    <div>
        <el-dialog :title="dataTitle" :visible.sync="dialogVisible" :close-on-click-modal="false" width="450px" center @close="cancelClick">
            <div class="dialog-box">
                <el-form ref="form" :rules="rules" :model="form" label-width="100px">
                    <el-form-item prop="id" label="编码">
                        <span v-if="dataType =='detail'">{{ form.id }}</span>
                        <el-input v-else type="text" v-model="form.id" placeholder="请输入编码"></el-input>
                    </el-form-item>
                    <el-form-item prop="name" label="类型名称">
                        <span v-if="dataType =='detail'">{{ form.name }}</span>
                        <el-input v-else v-model="form.name" placeholder="请输入类型名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="sort" label="排序号">
                        <span v-if="dataType =='detail'">{{ form.sort }}</span>
                        <el-input v-else type="number" v-model="form.sort" placeholder="请输入排序号"></el-input>
                    </el-form-item>
                    <el-form-item prop="parent" label="危险源类型">
                        <span v-if="dataType =='detail'">{{ form.parent ? '是' : '否' }}</span>
                        <el-select v-else value-key="id" v-model="form.parent" filterable placeholder="请选择">
                            <el-option v-for="(item,index) in nameList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <span v-if="dataType =='detail'">{{ form.enabled ? '是' : '否' }}</span>
                        <el-switch v-else v-model="form.enabled" active-value="1" inactive-value="0"></el-switch>
                    </el-form-item>
                </el-form>
                <div v-if="dataType !='detail'" class="btn-box">
                    <el-button class="btn" @click="cancelClick">取 消</el-button>
                    <el-button class="btn bg-blue" type="primary" @click="comfirmClick">确 定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {request} from "@/assets/js/utils/request";
export default {
    props: ['isDialog','dataTitle','dataType','dataInfo'],
    data() {
        return {
            title: '',
            form: {
                name: '',
                enabled: '',
                sort: '',
                parent: '',
                id: ''
            },
            rules: {
                id: [
                    { required: true, message: '请输入编码', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入类型名称', trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: '请输入排序号', trigger: 'blur' }
                ],
                parent: [
                    { required: true, message: '请选择危险源类型', trigger: 'change' }
                ],
            },
            dialogVisible: false,
            nameList: []
        }
    },
    created() {
       this.initData()
    },
    methods: {
        cancelClick() {
            this.dialogVisible = false
            this.$emit('dialogChange')
        },
        comfirmClick() {
            let txtAction = ''
            let str = ''
            let id = ''
            if(this.dataType == 'modify') {
                // id = this.dataInfo.id
                txtAction = 'update'
                str = '修改成功'
            } else {
                txtAction = 'insert'
                str = '添加成功'
            }
            this.$refs.form.validate((valid) => {
                if (valid) {
                    request({
                        url: '/manager/configmag/riskSrcNameSave.jsp',
                        method: 'post',
                        data: {
                            id: this.form.id,
                            parent: this.form.parent,
                            name: this.form.name,
                            enabled: this.form.enabled,
                            sort: this.form.sort,
                            txtAction
                        }
                    }).then(res => {
                        if(res.code == 200) {
                            this.$message({
                                message: str,
                                type: 'success'
                            });
                            this.dialogVisible = false
                            this.$emit('dialogChange')
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        initData() {
            this.loading = true
            request({
                url: '/manager/configmag/riskSrcTypeQuery.jsp',
                method: 'post',
                data: {
                    txtAction: 'query',
                    page: 1,
                    limit: 9999
                }
            }).then(res => {
                if(res.code == 200) {
                    this.nameList = res.data || []
                }
            })
        }
    },
    watch: {
        isDialog(newVal, oldVal) {
            this.dialogVisible = newVal
            this.form.name = ''
            this.form.enabled = ''
            this.form.sort = ''
            if(this.dataType == 'detail' || this.dataType == 'modify') {
                this.form.name = this.dataInfo.name
                this.form.enabled = this.dataInfo.enabled
                this.form.parent = this.dataInfo.parent
                this.form.id = this.dataInfo.id
                this.form.sort = this.dataInfo.sort
            }
        }
    }
}
</script>
<style lang="less" scoped>
    .btn-box{
        text-align: right;
        .btn{
            padding: 0;
            width: 80px;
            height: 32px;
        }
        .bg-blue{
            background: #016aed;
        }
    }
    /deep/.dialog-box{
        .el-input{
            width: 280px;
            .el-input__inner{
                width: 280px;
                height: 32px;
                border-color: #d5d5d5;
            }
        }
    }
</style>